<template>
    <el-dialog v-model="conf.show" :title="conf.title" :close-on-click-modal="false" style="width: 950px">
        <div class="row items-center" style="gap: 10px; margin-bottom: 15px">
            <div>条件：</div>
            <el-input v-model="conf.findName" style="width: 160px" placeholder="查找" />
            <el-button type="primary" @click="conf.search">搜索</el-button>
            <div>搜索结果：</div>
            {{ conf.searchlistnum }}个（超过1000个只显示1000个左右的结果）
        </div>
        <div class="row items-center" style="gap: 10px; margin-bottom: 15px">
            <div>放大：</div>
            <el-switch v-model="conf.isbig" />
            <el-tooltip
                effect="dark"
                content="开启时使用图标库上传时的颜色示例:chroma、chromab、bank等多色图标库"
                placement="top"
            >
                <div class="row items-center">
                    <div>颜色控制：</div>
                    <el-switch v-model="conf.nofill" />
                </div>
            </el-tooltip>
            <template v-if="!conf.nofill">
                <div>颜色：</div>
                <colorChoose v-model:colors="conf.color" />
            </template>
        </div>
        <el-scrollbar max-height="750px">
            <div class="column" v-if="conf.showIcon">
                <template v-for="item in conf.searchlist">
                    <div class="fit-width flex flex-center" style="font-size: 22px; font-weight: bold">
                        {{ item.lib }}
                    </div>
                    <div class="row">
                        <template v-for="el in item.list">
                            <div
                                class="iconlist column flex-center"
                                @click="conf.choose(item.lib, el)"
                                :style="{
                                    background:
                                        el.name === conf.item.item.name && conf.lib === conf.item.lib
                                            ? '#c8ebff'
                                            : undefined,
                                    height: conf.isbig ? '80px' : '60px',
                                    width: conf.isbig ? '180px' : '90px'
                                }"
                            >
                                <addIconItem
                                    :isbig="conf.isbig"
                                    :el="el"
                                    :color="conf.color"
                                    :nofill="conf.nofill"
                                    :lib="item.lib"
                                />
                                <div style="width: 0px" class="flex flex-center">
                                    <div style="text-wrap: nowrap">{{ el.name }}</div>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="conf.close">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue'
import colorChoose from './colorChoose.vue'
import System from '~/utils/System'
import addIconItem from './addIconItem.vue'

const props = defineProps({
    show: { default: false }
})

watch(
    () => props.show,
    () => {
        conf.show = props.show
        if (conf.show) {
            conf.open()
        }
    }
)
const emit = defineEmits(['close', 'update:show'])

const conf = reactive({
    libs: [] as string[],
    lib: '',
    size: 0,
    nofill: false,
    isbig: false,
    getlibs: async () => {
        if (conf.libs.length) return
        const viconConf = VConf.vicon
        const _url = `${viconConf.url}/_keys.json`
        let _res = await viconConf.fun.getRes(_url)
        if (!_res) _res = await viconConf.fun.getResorce(_url, true)
        const _urls = `${viconConf.url}/_size.json`
        let _ress = await viconConf.fun.getRes(_urls)
        if (!_ress) _ress = await viconConf.fun.getResorce(_urls, true)
        conf.size = _ress.num
        conf.libs = _res
        conf.lib = conf.libs[0]
    },
    list: {} as { [key: string]: { name: string }[] },
    title: '选择图标',
    findName: '',
    search: () => {
        if (!conf.findName.length) return
        const keys = Object.keys(conf.list)
        conf.searchlist = []
        conf.searchlistnum = 0
        for (let i = 0; i < keys.length; i++) {
            const lib = keys[i]
            const arr = conf.list[lib]
            const _res = arr.filter((v) => v.name.indexOf(conf.findName) !== -1)
            if (_res.length) {
                conf.searchlist.push({
                    lib,
                    list: _res
                })
                conf.searchlistnum += _res.length
                if (conf.searchlistnum > 1000) return
            }
        }
    },
    searchlist: [] as any[],
    searchlistnum: 0,
    color: [],
    item: {
        lib: '',
        item: {} as any
    },
    show: false,
    showIcon: false,
    open: async () => {
        const viconConf = VConf.vicon
        await conf.getlibs()
        System.loading(true, 300000)
        conf.showIcon = false
        for (let i = 0; i < conf.libs.length; i++) {
            const _lib = conf.libs[i]
            if (!conf.list[_lib]) conf.list[_lib] = []
            const _url = `${viconConf.url}/${_lib}/_all.json`
            let _list = await viconConf.fun.getRes(_url)
            if (!_list) _list = await viconConf.fun.getResorce(_url, true)
            try {
                const _keys = Object.keys(_list)
                conf.list[_lib] = []
                for (let j = 0; j < _keys.length; j++) {
                    conf.list[_lib].push({
                        name: _keys[j]
                    })
                }
            } catch (error) {
                console.log('_list', _lib, _list)
            }
        }
        conf.showIcon = true
        System.loading(false)
    },
    choose: async (lib: any, item: any) => {
        conf.item.lib = lib
        conf.item.item = item
        const status = await StrUtil.copyText(`${lib}-${item.name}`)
        if (status) System.sr('复制成功')
        else System.sr('复制失败')
    },
    close: () => {
        conf.show = false
    },
    closeItem: () => {
        emit('close', conf.item)
        conf.close()
    }
})

watch(
    () => conf.show,
    () => {
        emit('update:show', conf.show)
    }
)
</script>
<style lang="less" scoped>
.iconlist {
    padding: 0px 5px;
    margin: 5px 0px;
    gap: 5px;
    cursor: pointer;
    height: 60px;
    width: 90px;
    font-size: 12px;

    &:hover {
        background: #f2f6fc;
    }
}
</style>
